<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for="item in imgs" :key="item['_id']" class="swiper-slide">
        <img :src="item.carousel" />
      </div>
      <slot name="slid"></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>
 
<script>
import "swiper/dist/js/swiper";
import "swiper/dist/css/swiper.css";
import Swiper from "swiper";

export default {
  name: "IndexSwiper",
  props: {
    imgs: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },

  mounted() {
    new Swiper(".swiper-container", {
      direction: "horizontal", // 垂直切换选项
      //mousewheel: true, //滚轮
      autoplay: {
        //自动开始
        delay: 2500, //时间间隔
        disableOnInteraction: false, //*手动操作轮播图后不会暂停*
      },
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 分页器可以点击
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
};
</script>
 
<style scoped lang="stylus">
.swiper-pagination
  position absolute
  bottom 2.9rem
  right 1rem
  text-align center !important

.swiper-container ::v-deep .swiper-pagination-bullet-active
  background-color #fff
</style>